
<div class="inbox-nav-bar no-content-padding"> 
    <h1 class="page-title txt-color-blueDark hidden-tablet">
		<i class="fa fa-fw fa-inbox"></i>
 收件箱 &nbsp;
		<span class="btn-group ">
				<a href="#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle"><span class="caret single"></span></a>
			<ul class="dropdown-menu $dropdownMenuClass" >
				<li >
 <a href="#">动作1</a> 
</li>
				<li >
 <a href="#">动作2</a> 
</li>
				<li >
 <a href="#">动作3</a> 
</li>
                <li class="divider"></li>

				<li >
 <a href="#">动作4</a> 
</li>
            
</ul>
		
</span>
    </h1>

    <div class="btn-group hidden-desktop visible-tablet">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Inbox <i class="fa fa-caret-down"></i>
        </button>
		<ul class="dropdown-menu pull-left" >
            <li >
 <a href="javascript:void(0);" class="inbox-load">Inbox <i class="fa fa-check"></i></a> 
</li>
            <li >
 <a href="javascript:void(0);">Sent</a> 
</li>
            <li >
 <a href="javascript:void(0);">Trash</a> 
</li>
            <li class="divider"></li>

            <li >
 <a href="javascript:void(0);">Spam</a> 
</li>
        
</ul>
    
</div>

    <div class="inbox-checkbox-triggered">

        <div class="btn-group ">
            <a href="javascript:void(0);" rel="tooltip" title="" data-placement="bottom" data-original-title="标记为重要邮件" class="btn btn-default"><strong><i class="fa fa-exclamation fa-lg text-danger"></i></strong></a>
            <a href="javascript:void(0);" rel="tooltip" title="" data-placement="bottom" data-original-title="移动至文件夹" class="btn btn-default"><strong><i class="fa fa-folder-open fa-lg"></i></strong></a>
            <a href="javascript:void(0);" rel="tooltip" title="" data-placement="bottom" data-original-title="删除" class="deletebutton btn btn-default"><strong><i class="fa fa-trash-o fa-lg"></i></strong></a>
        
</div>

    </div> 
	<a class="btn btn-primary pull-right hidden-desktop visible-tablet" id="compose-mail-mini" href="javascript:void(0);">
     <strong><i class="fa fa-file fa-lg"></i></strong> 
</a>
    <div class="btn-group pull-right inbox-paging">
        <a href="javascript:void(0);" class="btn btn-default btn-sm"><strong><i class="fa fa-chevron-left"></i></strong></a>
        <a href="javascript:void(0);" class="btn btn-default btn-sm"><strong><i class="fa fa-chevron-right"></i></strong></a>
    
</div>
    <span class="pull-right"><strong>1-30</strong> / <strong>3,452</strong></span>

</div>

<div id="inbox-content" class="inbox-body no-content-padding">

    <div class="inbox-side-bar"> 
		<a class="btn btn-primary btn-block" id="compose-mail" href="javascript:void(0);">
     <strong>写邮件</strong> 
</a>

        <h6> 文件夹 <a href="javascript:void(0);" rel="tooltip" title="" data-placement="right" data-original-title="刷新" class="pull-right txt-color-darken"><i class="fa fa-refresh"></i></a></h6>

        <ul class="inbox-menu-lg">
            <li class="active">
                <a class="inbox-load" href="javascript:void(0);"> 收件箱 (14) </a>
            </li>
            <li>
                <a href="javascript:void(0);">发件箱</a>
            </li>
            <li>
                <a href="javascript:void(0);">草稿箱</a>
            </li>
            <li>
                <a href="javascript:void(0);">垃圾邮件</a>
            </li>
        </ul>

        <h6> 快速访问 <a href="javascript:void(0);" rel="tooltip" title="" data-placement="right" data-original-title="动作1" class="pull-right txt-color-darken"><i class="fa fa-plus"></i></a></h6>

        <ul class="inbox-menu-sm">
            <li>
                <a href="javascript:void(0);"> 图片 (476)</a>
            </li>
            <li>
                <a href="javascript:void(0);">文档 (4)</a>
            </li>
        </ul>

        <div class="air air-bottom inbox-space">

            3.5GB / <strong>10GB</strong><a href="javascript:void(0);" rel="tooltip" title="" data-placement="top" data-original-title="垃圾邮件" class="pull-right txt-color-darken"><i class="fa fa-trash-o fa-lg"></i></a>

            <div class="progress progress-micro ">
    				<div class="progress-bar progress-primary" style="width: 34%;"></div>
            
</div>
        </div>

    </div>

    <div class="table-wrap custom-scroll animated fast fadeInRight">
        <!-- ajax will fill this area -->
        LOADING...

    </div>

    <div class="inbox-footer">

        <div class="row">

            <div class="col-xs-6 col-sm-1">

                <div class="txt-color-white hidden-desktop visible-mobile">
                    3.5GB / <strong>10GB</strong>

                    <div class="progress progress-micro ">
    						<div class="progress-bar progress-primary" style="width: 34%;"></div>
                    
</div>
                </div>
            </div>

            <div class="col-xs-6 col-sm-11 text-right">
                <div class="txt-color-white inline-block">
                    <i class="txt-color-blueLight hidden-mobile">该账户上次登录时间 <i class="fa fa-clock-o"></i> 52 分钟前 |</i> 显现 <strong>44条，总共259条</strong>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();

	// PAGE RELATED SCRIPTS

	// pagefunction
	
	var pagefunction = function() {

		// fix table height
		tableHeightSize();

		$(window).resize(function() {
			tableHeightSize()
		})
		function tableHeightSize() {

			if ($('body').hasClass('menu-on-top')) {
				var menuHeight = 68;
				// nav height

				var tableHeight = ($(window).height() - 224) - menuHeight;
				if (tableHeight < (320 - menuHeight)) {
					$('.table-wrap').css('height', (320 - menuHeight) + 'px');
				} else {
					$('.table-wrap').css('height', tableHeight + 'px');
				}

			} else {
				var tableHeight = $(window).height() - 224;
				if (tableHeight < 320) {
					$('.table-wrap').css('height', 320 + 'px');
				} else {
					$('.table-wrap').css('height', tableHeight + 'px');
				}

			}

		}

		/*
		 * LOAD INBOX MESSAGES
		 */
		loadInbox();
		function loadInbox() {
			loadURL("ajax/email/email-list.html", $('#inbox-content > .table-wrap'))
		}
	
		/*
		 * Buttons (compose mail and inbox load)
		 */
		$(".inbox-load").click(function() {
			loadInbox();
		});
	
		// compose email
		$("#compose-mail").click(function() {
			loadURL("ajax/email-compose.html", $('#inbox-content > .table-wrap'));
		});
		
	};
	
	// end pagefunction
	
	// load delete row plugin and run pagefunction

	loadScript("js/plugin/delete-table-row/delete-table-row.min.js", pagefunction);
	
</script>